<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <title>VueComponent</title>
    <script type="text/javascript" src="./../vue.js/vue.js"></script>
  </head>

  <body>
    <div id="root">
      <school></school>
      <hello></hello>
    </div>

    <script type="text/javascript">
      Vue.config.productionTip = false;

      const school = Vue.extend({
        name: "School",
        template: `
				<div>
					<h2>学校名称:{{name}}</h2>	
					<h2>学校地址:{{address}}</h2>	
					<button @click="showName">点我提示学校名</button>
				</div>
			`,
        data() {
          return {
            name: "尚硅谷",
            address: "北京",
          };
        },
        methods: {
          showName() {
            console.log("showName", this.__proto__.__proto__);
          },
        },
      });

      console.log('school:', school);

      const test = Vue.extend({
        template: `<span>atguigu</span>`,
      });

      const hello = Vue.extend({
        template: `
				<div>
					<h2>{{msg}}</h2>
					<test></test>
				</div>
			`,
        data() {
          return {
            msg: "你好啊!",
          };
        },
        components: {
          test,
        },
      });

			console.log('hello:', hello);
			console.log('school === hello:', school === hello);

      // 创建vm
      const vm = new Vue({
        el: "#root",
        components: {
          hello,
          school,
        },
      });
      console.log(vm);
    </script>
  </body>
</html>

<!-- 
		关于VueComponent:
					1.school组件本质是一个名为VueComponent的构造函数,且不是程序员定义的,是Vue.extend生成的.

					2.我们只需要写<school/>或<school></school>,Vue解析时会帮我们创建school组件的实例对象,
						即Vue帮我们执行的:new VueComponent(options).

					3.特别注意:每次调用Vue.extend,返回的都是一个全新的VueComponent!!!!

					4.关于this指向:
							(1).组件配置中:
										data函数、methods中的函数、watch中的函数、computed中的函数 它们的this均是【VueComponent实例对象】.
							(2).new Vue(options)配置中:
										data函数、methods中的函数、watch中的函数、computed中的函数 它们的this均是【Vue实例对象】.

					5.VueComponent的实例对象,以后简称vc(也可称之为:组件实例对象).
						Vue的实例对象,以后简称vm.
-->
